<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            `Vue` 中使用组件的三大步骤
                1. 定义组件
                   - 使用 `Vue.extend(options)` 创建，其中 `options` 和 `new Vue(options)` 时传入的 `options` 几乎一样，但也有点区别
                    a. `el` 不要写，因为最终所有的组件都要经过一个 `vm` 的管理，由 `vm` 中的 `el` 才决定服务哪个容器
                    b.  `data` 必须写成函数，避免组件被复用时，数据存在引用关系
                2. 注册组件
                    a. 局部注册：`new Vue()` 的时候 `options` 传入  `components` 选项
                    b. 全局注册：`Vue.component('组件名',组件)`
                3. 使用组件
                    编写组件标签如 `<school></school>`
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>{{msg}}</h1>
            <hr />
            <!-- 第三步：编写组件标签 -->
            <school></school>
            <hr />
            <!-- 第三步：编写组件标签 -->
            <student></student>
        </div>

        <div id="root2">
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        // 第一步：创建school组件
        const school = Vue.extend({
            template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名称</button>
            </div>
            `,
            // el: '#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
            data() {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平',
                };
            },
            methods: {
                showName() {
                    alert(this.schoolName);
                },
            },
        });

        // 第一步：创建student组件
        const student = Vue.extend({
            template: `
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
                </div>
                `,
            // el: '#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
            data() {
                return {
                    studentName: '张三',
                    age: 18,
                };
            },
        });

        // 第一步：创建hello组件
        const hello = Vue.extend({
            template: `
            <div>
                <h2>Welcome! {{name}}</h2>
            </div>
            `,
            data() {
                return {
                    name: 'Tom',
                };
            },
        });

        // 全局注册组件
        Vue.component('hello', hello);

        // 创建VM
        new Vue({
            el: '#root',
            data: {
                msg: '你好啊',
            },
            // 第二步：注册组件(局部注册)
            components: {
                school,
                student,
            },
        });

        // 创建VM
        new Vue({
            el: '#root2',
        });
    </script>
</html>
